<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <i class="el-icon-search btn-search" @click="handleShowSearch()"></i>
      <div v-show="showbtns == true" class="search-lf">
        <el-form-item label="合同编号">
          <el-input
            v-model="listQuery.contractNo"
            placeholder="合同编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="合同申请人">
          <el-input
            v-model="listQuery.contractApplicant"
            placeholder="合同申请人"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" plain @click="getList()">查询</el-button>
        </el-form-item>
      </div>
      <div class="btn-box">
        <el-button type="primary" @click="handleExport()">更新PO列表</el-button>
        <el-button type="success" @click="handleAdd()">新增</el-button>
        <a
          class="el-button el-button--success el-button--medium"
          href="http://123.57.59.222:8081/api/file/new_contract_template.xlsx"
          type="primary"
          >模版下载</a
        >
        <el-upload
          action="http://123.57.59.222:8081/api/file/import_new_contract"
          :show-file-list="false"
          :on-success="handleImageSuccess"
          class="upload_image"
        >
          <el-button type="primary" v-show="roleName == 'admin'"
            >导入</el-button
          >
        </el-upload>
      </div>

      <!-- <el-button

        :disabled='list.length<=0'
          
              type='primary'
          icon="el-icon-document"
          
        >导出excel</el-button> -->
    </el-form>

    <p style="color: red; font-size: 12px; line-height: 30px">
      *您有{{ total }}条新合同处理
    </p>

    <el-table
      v-loading="listLoading"
      border
      height="650px"
      :data="list"
      fit
      @selection-change="handleSelectionChange"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- <el-table-column align="center" width="130px" label="PO单号">
        <template slot-scope="{row}">
          <span>{{ row.po }}</span>
        </template>
      </el-table-column> -->

      <el-table-column align="center" width="200px" label="产品类型">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select
              filterable
              v-model="contractList.productTypeName"
              @change="handleChangePro($event)"
              placeholder="请选择"
            >
              <el-option
                v-for="item in productTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </template>
          <span v-else>{{ row.productTypeName }}</span>
        </template>
      </el-table-column>

      <el-table-column sort align="center" width="100px" label="创建时间">
        <template slot-scope="{ row }">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100px" label="战区">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select
              filterable
              v-model="contractList.regionName"
            
              @change="handleChangePro4($event)"
              placeholder="请选择"
            >
              <el-option
                v-for="item in regiosList"
                :key="item.id"
                :label="item.region"
                :value="item.region"
              ></el-option>
            </el-select>
          </template>
          <span v-else>{{ row.regionName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="省份">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select
              filterable
              v-model="contractList.provinceName"
              @change="handleChangePro3($event)"
              placeholder="请选择"
            >
              <el-option
                v-for="item in provinceList"
                :key="item.provinceId"
                :label="item.provinceName"
                :value="item.provinceName"
              ></el-option>
            </el-select>
          </template>
          <span v-else>{{ row.provinceName }}</span>
        </template>
      </el-table-column>
     <el-table-column align="center" label="成功部门">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-select
                filterable
                v-model="contractList.teamId"
                  @change="handleChangePro5($event)"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in teamNameList"
                  :key="item.id"
                  :label="item.teamName"
                  :value="item.id"
                ></el-option>
              </el-select>
          </template>
          <span v-else>{{ row.teamName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="180px" label="合同编号">
        <template slot-scope="{ row }">
          <span>{{ row.contractNo }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="200px" label="客户名称">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.customerName" />
          </template>
          <span v-else>{{ row.customerName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="合同金额">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input type="number" v-model="contractList.contractAmount" />
          </template>
          <span v-else>{{ row.contractAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100px" label="合同申请人">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.contractApplicant" />
          </template>
          <span v-else>{{ row.contractApplicant }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="合同交付时间">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-date-picker
              v-model="contractList.contractDeliveryDate"
              type="date"
              placeholder="选择日期"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
            ></el-date-picker>
          </template>
          <span v-else>{{ row.contractDeliveryDate }}</span>
        </template>

        <!-- <template slot-scope="{row}">
           <span>{{ row.contractDeliveryTime }}</span>
        </template>-->
      </el-table-column>

      <el-table-column align="center" width="150px" label="合同总时长（分钟）">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input
              type="number"
              v-model="contractList.contractTotalTimeLength"
            ></el-input>
          </template>
          <span v-else>{{ row.contractTotalTimeLength }}</span>
        </template>
        <!-- <template slot-scope="{row}">
          <span>{{ row.contractTotalTimeLength }}</span>
        </template>-->
      </el-table-column>
      <el-table-column align="center" width="150px" label="已完成时长（分钟）">
        <template slot-scope="{ row }">
          <span>{{ row.contractFinishedTimeLength }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="150px" label="未完成时长（分钟）">
        <template slot-scope="{ row }">
          <span>{{ row.contractUnfinishedTimeLength }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="已回款">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.contractPaymentReceived" />
          </template>
          <span v-else>{{ row.contractPaymentReceived }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="未回款">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.contractOutstandingPayment" />
          </template>
          <span v-else>{{ row.contractOutstandingPayment }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="版权归属">
        <!-- <template slot-scope="{row}">
          <span>{{ row.copyrightOwnership }}</span>
        </template>-->

        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.copyrightOwnership"></el-input>
          </template>
          <span v-else>{{ row.copyrightOwnership }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="版权费">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.copyrightFee"></el-input>
          </template>
          <span v-else>{{ row.copyrightFee }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商务杂费">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.businessSundryFee"></el-input>
          </template>
          <span v-else>{{ row.businessSundryFee }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="100px" label="第三方采购">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.contractPurchaseAmount"></el-input>
          </template>
          <span v-else>{{ row.contractPurchaseAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="合同毛利">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.contractGrossProfit" />
          </template>
          <span v-else>{{ row.contractGrossProfit }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="100px" label="预测毛利率">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.forecastGrossProfitRate" />
          </template>
          <span v-else>{{ row.forecastGrossProfitRate }}</span>
        </template>
      </el-table-column>
       <el-table-column align="center" width="100px" label="风险计提">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.riskProvision" />
          </template>
          <span v-else>{{ row.riskProvision }}</span>
        </template>
      </el-table-column>
       <el-table-column align="center" width="100px" label="风险利率">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.riskRate" />
          </template>
          <span v-else>{{ row.riskRate }}</span>
        </template>
      </el-table-column>
       <el-table-column align="center" width="100px" label="渠道费用">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.channelFee" />
          </template>
          <span v-else>{{ row.channelFee }}</span>
        </template>
      </el-table-column>
       <el-table-column align="center" width="100px" label="产学合作费">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.industryAndUniversityCooperationFee" />
          </template>
          <span v-else>{{ row.industryAndUniversityCooperationFee }}</span>
        </template>
      </el-table-column>
       <el-table-column align="center" width="100px" label="其他">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.other" />
          </template>
          <span v-else>{{ row.other }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        width="120px"
        label="预估生产成本"
      >
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.estimatedGenerationCost"></el-input>
          </template>
          <span v-else>{{ row.estimatedGenerationCost }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="PO状态">
        <template slot-scope="{ row }">
          <!-- <span>{{ row.state   }}</span> -->
          <el-tag :type="row.contractState | statusColorFilter">{{
            row.state | statusFilter
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120px" label="约定售后期限">
        <template slot-scope="{ row }">
          <template v-if="row.rowEdit">
            <el-input v-model="contractList.afterSalePeriod"></el-input>
          </template>
          <span v-else>{{ row.afterSalePeriod }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="150">
        <template slot-scope="{ row }">
          <el-button
            v-if="row.rowEdit"
            type="success"
            size="mini"
            icon="el-icon-circle-check-outline"
            @click="confirmContract(row)"
            >保存</el-button
          >
          <el-button
            v-else
            type="primary"
            size="mini"
            :disabled="editDisabled == true"
            icon="el-icon-edit"
            @click="handleEdit(row)"
            >编辑</el-button
          >

          <el-button
            @click="handleDel(row.id)"
            class="mg-l"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      @close="handleClose"
      :visible.sync="dialogVisible"
      width="70%"
      :title="dialogType === 'edit' ? '编辑用户' : '添加新合同'"
    >
      <el-form
        label-width="180px"
        ref="contractListForm"
        :rules="rules"
        :model="contractList"
        label-position="right"
      >
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="产品类型" prop="productTypeName">
              <!-- <el-input v-model="contractList.productTypeName" placeholder="请选择" /> -->
              <el-select
                filterable
                v-model="contractList.productTypeName"
                @change="handleChangePro($event)"
                placeholder="请选择产品类型"
              >
                <el-option
                  v-for="item in productTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="战区名称" prop="regionName">
              <!-- <el-input v-model="contractList." placeholder="请选择" /> -->
              <el-select
                filterable
                v-model="contractList.regionName"
              
                @change="handleChangePro4($event)"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in regiosList"
                  :key="item.id"
                  :label="item.region"
                  :value="item.region"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="省份名称" prop="provinceName">
              <!-- <el-input v-model="contractList.provinceName" placeholder="请选择" /> -->
              <el-select
                filterable
                v-model="contractList.provinceName"
                @change="handleChangePro3($event)"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in provinceList"
                  :key="item.provinceId"
                  :label="item.provinceName"
                  :value="item.provinceName"
                ></el-option>
              </el-select>
            </el-form-item>
             <el-form-item label="成功部门" prop="teamId">
               <!-- <el-tree
                    :data="data"
                    node-key="id"
                     ref="tree"
                    @node-click='handleCurrentChange'
                  >
                  </el-tree> -->
                <el-select
                filterable
                v-model="contractList.teamId"
                @change="handleChangePro5($event)"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in teamNameList"
                  :key="item.id"
                  :label="item.teamName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
           
            <el-form-item label="合同编号" prop="contractNo">
              <el-input
                v-model="contractList.contractNo"
                placeholder="请输入"
              />
            </el-form-item>

            <el-form-item width="200px" label="客户名称" prop="customerName">
              <el-input
                v-model="contractList.customerName"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="合同金额" prop="contractAmount">
              <el-input
                type="number"
                v-model="contractList.contractAmount"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="合同申请人" prop="contractApplicant">
              <el-input
                v-model="contractList.contractApplicant"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="合同交付日期" prop="contractDeliveryDate">
              <el-date-picker
                v-model="contractList.contractDeliveryDate"
                type="date"
                placeholder="选择日期"
                format="yyyy/MM/dd"
                value-format="yyyy/MM/dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item
              label="合同总时长（分钟）"
              prop="contractTotalTimeLength"
            >
              <el-input
                type="number"
                v-model="contractList.contractTotalTimeLength"
                placeholder="请选择"
              />
            </el-form-item>
            <el-form-item label="风险计提" prop='riskProvision'>
          <el-input v-model="contractList.riskProvision"  />
        </el-form-item>
            <el-form-item label="风险利率" prop='riskRate'>
          <el-input v-model="contractList.riskRate"  />
        </el-form-item>
          <el-form-item label="渠道费用" prop='channelFee'>
          <el-input v-model="contractList.channelFee"  />
        </el-form-item>
        
       
          </el-col>
          <el-col :span="12">
              <el-form-item label="产学合作费" prop='industryAndUniversityCooperationFee'>
          <el-input v-model="contractList.industryAndUniversityCooperationFee"  />
        </el-form-item>
            <el-form-item label="合同已回款金额" prop="contractPaymentReceived">
              <el-input
                v-model="contractList.contractPaymentReceived"
                placeholder="请选择"
              />
            </el-form-item>
            <el-form-item
              label="合同未回款金额"
              prop="contractOutstandingPayment"
            >
              <el-input
                v-model="contractList.contractOutstandingPayment"
                placeholder="请选择"
              />
            </el-form-item>
            <el-form-item label="版权归属">
              <el-input
                v-model="contractList.copyrightOwnership"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="版权费用">
              <el-input
                v-model="contractList.copyrightFee"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="商务杂费">
              <el-input
                v-model="contractList.businessSundryFee"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="合同第三方采购金额">
              <el-input
                v-model="contractList.contractPurchaseAmount"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="合同毛利" prop="contractGrossProfit">
              <el-input
                v-model="contractList.contractGrossProfit"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="预测毛利率" prop="forecastGrossProfitRate">
              <el-input
                v-model="contractList.forecastGrossProfitRate"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label="预估生产成本">
              <el-input
                v-model="contractList.estimatedGenerationCost"
                placeholder="请输入"
              />
            </el-form-item>

            <el-form-item label="创建时间">
              <!-- <el-input v-model="contractList." placeholder="请输入" /> -->
              <el-date-picker
                v-model="contractList.createTime"
                type="date"
                placeholder="选择日期"
                format="yyyy/MM/dd"
                value-format="yyyy/MM/dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="约定售后期限">
              <!-- <el-input v-model="contractList." placeholder="请输入" /> -->
              <el-date-picker
                v-model="contractList.afterSalePeriod"
                type="date"
                placeholder="选择日期"
                format="yyyy/MM/dd"
                value-format="yyyy/MM/dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="PO备注">
              <el-input v-model="contractList.poRemark" placeholder="请输入" />
            </el-form-item>
             <el-form-item label="其他">
          <el-input v-model="contractList.other"  />
        </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: center">
        <el-button
          type="primary"
          class="cancel_border"
          plain
          @click="confirmContract"
          >确定</el-button
        >
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        <!-- <el-button type="success" :disabled='isSure' @click="handleExport">导入PO管理</el-button> -->
      </div>
    </el-dialog>
    <el-row>
      <el-col :span="12">
        <pagination
          v-show="total >= 20"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  contractsList,
  addContract,
  updateContracts,
  delContract,
  contractPO,
  getProvinces,
} from "@/api/supplier";

import { getProductType, getContractType } from "@/api/remote-search";
import { uploadNewContract } from "@/api/upload";
import { regiosList } from "@/api/user";
import { RegionsProvince,customerSuccess,getteamNamesAll} from "@/api/region";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  name: "contractList",
  components: { Pagination },
  filters: {
    statusColorFilter(status) {
      const statusMap = {
        1: "success",
        2: "danger",
        3: "warning",
        4: "info",
        5: " ",
      };
      return statusMap[status];
    },
    statusFilter(status) {
      const statusMap = {
        1: "进行中",
        2: "已完成",
        3: "已过期",
        0: "新合同",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      rules: {
        productTypeName: [
          { required: true, message: "请选择产品类型", trigger: "change" },
        ],
        
         teamId: [
          { required: true, message: "请选择客户成功", trigger: "change" },
        ],
        regionName: [
          { required: true, message: "请选择战区", trigger: "change" },
        ],
        provinceName: [
          { required: true, message: "请选择省份", trigger: "change" },
        ],
        contractDeliveryDate: [
          {
            type: "string",
            required: true,
            message: "请选择合同交付日期",
            trigger: "change",
          },
        ],

        contractNo: [
          { required: true, message: "请输入合同编号", trigger: "blur" },
        ],
        customerName: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        contractAmount: [
          { required: true, message: "请输入合同金额", trigger: "blur" },
        ],
        contractApplicant: [
          { required: true, message: "请输入合同申请人", trigger: "blur" },
        ],
        contractTotalTimeLength: [
          { required: true, message: "请输入合同总时长", trigger: "blur" },
        ],
        contractPaymentReceived: [
          { required: true, message: "请输入合同已回款金额", trigger: "blur" },
        ],
        contractOutstandingPayment: [
          { required: true, message: "请输入合同未回款", trigger: "blur" },
        ],
        contractGrossProfit: [
          { required: true, message: "请输入合同毛利", trigger: "blur" },
        ],
        forecastGrossProfitRate: [
          { required: true, message: "请输入预测毛利率", trigger: "blur" },
        ],
           riskProvision: [
          { required: true, message: "请输入风险计提", trigger: "blur" },
        ],
           riskRate: [
          { required: true, message: "请输入风险利率", trigger: "blur" },
        ],
           channelFee: [
          { required: true, message: "请输入渠道费用", trigger: "blur" },
        ],
           industryAndUniversityCooperationFee: [
          { required: true, message: "请输入产学合作费", trigger: "blur" },
        ],
      },
      showbtns: false,
      list: [],
      editDisabled: false,
      roleName: sessionStorage.getItem("memberName"),
      downloadLoading: false,
      multipleSelection: "", //多选
      isSure: true,
      rowEdit: false,
      newPoId: "", //新增之后返回的id
      downloadLoading: false,
      productTypeList: [], //产品类型集合
      productLineList: [], //产品线集合
      contracTypeList: [], //合同类型
      provinceList: [], //省份
      regiosList: [], //战区
      contractList: {
        contractDeliveryDate: "",
      },
      total: 0,
      dialogVisibleMenu: false,
      listLoading: true,
      listQuery: {
        access_token: sessionStorage.getItem("token"),
        page: 1,

        name: "",

        state: "",
        pageSize: 20,
      },

      userId: "", //用户id
      rolesList: [],

      dialogVisible: false,
      dialogType: "new",
      checkStrictly: false,

      ids: "",
      idsPo: "",
       data: [],
       teamNameList:[]//客户成功部门
    };
  },
  created() {
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id;
      this.getList(id);
    }
    this.getList();
  },
  computed: {},

  methods: {
    handleClose() {
      this.editDisabled = false;
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns;
    },
    handleEdit(row) {
      this.editDisabled = true;
      this.dialogType = "edit";
      //this.dialogVisible = true;
      row.rowEdit = !row.rowEdit;

      this.contractList.id = row.id;
    },
    handleImageSuccess(file) {
      if (file.code == 200) {
        this.$message.success(file.message);
        this.getList();
      } else {
        this.$message.error(file.message);
      }
      // this.getList()
      // this.fileList=file
      // this.emitInput(file.data.filePath);
      // this.imageUrl=file.data
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;

      let res = [];
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((r) => {
          res.push(r.id);
        });
        this.idsPo = res.join(",");
      }
    },
    handleChangePro(id) {
      let obj = {};
      obj = this.productTypeList.find((item) => {
        return item.name === id;
      });

      this.contractList.productTypeId = obj.id;
    },
    handleChangePro2(id) {
      let obj = {};
      obj = this.contracTypeList.find((item) => {
        return item.name === id;
      });
      this.contractList.contractTypeId = obj.type;
    },
    handleCurrentChange(data){
      console.log(data)
       let checkedList = this.$refs.tree.getCheckedKeys();
      let res = [];
      let ids;
      if (checkedList.length > 0) {
        checkedList.forEach((r) => {
          res.push(r);
        });
         ids= res.join(",");
      }
      console.log(ids)
        
    },
    handleChangePro3(id) {
      let obj = {};
      obj = this.provinceList.find((item) => {
        return item.provinceName === id;
      });
      this.contractList.provinceId = obj.provinceId;
    },
      handleChangePro5(id) {
        console.log(id)
      let obj = {};
      obj = this.teamNameList.find((item) => {
        return item.id === id;
      });
      this.contractList.teamName = obj.teamName;
    },
    handleChangePro4(id) {
      let obj = {};
      obj = this.regiosList.find((item) => {
        return item.region === id;
      });
      this.contractList.regionId = obj.id;
      RegionsProvince(obj.id).then((res) => {
        this.provinceList = res.data.data;
      });
    },
    getList() {
      this.editDisabled = false;
      this.listLoading = true;
      customerSuccess().then(res=>{
        this.data=res.data.data
      })
      getteamNamesAll().then(res=>{
         this.teamNameList=res.data.data
      })
      contractsList(this.listQuery)
        .then((response) => {
          this.list = response.data.data.rows;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
      getProductType().then((res) => {
        this.productTypeList = res.data.data;
      });

      getContractType().then((res) => {
        this.contracTypeList = res.data.data;
      });

      regiosList().then((res) => {
        this.regiosList = res.data.data;
      });
    },
    handleDel(id) {
      this.$confirm("确定删除该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          delContract(id).then((res) => {
            if (res.data.code == "200") {
              this.$message.success(res.data.message);
              this.getList();
            } else {
              this.$message.error(res.data.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handlenewContract() {
      this.dialogType = "new";
      this.dialogVisible = true;
    },

    handleAdd() {
      this.dialogType = "new";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["contractListForm"].clearValidate();
      });
      //  this.$refs['contractListForm'].resetFields();
      this.contractList = {};
    },
    confirmContract(id) {
      const isEdit = this.dialogType === "edit";
      if (isEdit) {
        updateContracts(this.contractList).then((res) => {
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
            this.dialogVisible = false;
            this.getList();
            this.editDisabled = false;
          } else {
            this.$message.error(res.data.message);
          }
        });
        return false;
      }
      let _this = this;
      let data = {};
      this.$refs["contractListForm"].validate((valid) => {
        if (valid) {
          addContract(this.contractList).then((res) => {
            if ((res.code = "200")) {
              this.newPoId = res.data.code;
              this.$message.success(res.data.message);
              this.dialogVisible = false;

              this.contractsList = ""; //清空新增数组
              this.getList();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    handleExport() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请选择需要导入PO的数据");
        return false;
      }
      contractPO(this.idsPo).then((res) => {
        if (res.data.code == "200") {
          this.$message.success(res.data.message);
          this.getList();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
  },
};
</script>

<style scoped>
.upload_image {
  display: inline-block;
  margin: 0 10px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
